<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/src/style.css" rel="stylesheet" />
  </head>
  <body class="bg-neutral-900">
    <!-- nav-top -->
    <div class="overflow-hidden text-sm text-stone-950">
      <nav
        class="flex list-none items-center justify-between bg-stone-950 px-4 py-3 text-amber-50"
      >
        <li class="flex items-center space-x-4">
          <button
            class="h-8 w-8 rounded-md border border-gray-500 hover:border-gray-700"
          >
            <svg
              class="m-auto h-4 w-4 fill-gray-500 hover:fill-gray-700"
              aria-hidden="true"
              viewBox="0 0 16 16"
              version="1.1"
              data-view-component="true"
            >
              <path
                d="M1 2.75A.75.75 0 0 1 1.75 2h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm0 5A.75.75 0 0 1 1.75 7h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 7.75ZM1.75 12h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5Z"
              ></path>
            </svg>
          </button>

          <a href="#" class="h-8 w-8">
            <svg
              class="m-auto fill-current hover:fill-gray-200"
              aria-hidden="true"
              viewBox="0 0 24 24"
              version="1.1"
              data-view-component="true"
            >
              <path
                d="M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.127-1.554-.385-.207-.936-.715-.014-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.448-.275-5.005-1.224-5.005-5.432 0-1.196.426-2.186 1.128-2.956-.111-.275-.496-1.402.11-2.915 0 0 .921-.288 3.024 1.128a10.193 10.193 0 0 1 2.75-.371c.936 0 1.871.123 2.75.371 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.221 2.64.111 2.915.701.77 1.127 1.747 1.127 2.956 0 4.222-2.571 5.157-5.019 5.432.399.344.743 1.004.743 2.035 0 1.471-.014 2.654-.014 3.025 0 .289.206.632.756.522C19.851 20.979 23 16.854 23 12c0-6.077-4.922-11-11-11Z"
              ></path>
            </svg>
          </a>

          <div>
            <p class="text-sm text-gray-400">
              tailwindLabs /
              <span class="text-sm font-bold text-gray-200 hover:underline"
                >tailwindcss</span
              >
            </p>
          </div>
        </li>
        <li>
          <div class="hidden items-center space-x-4 lg:flex">
            <div class="relative">
              <input
                type="text"
                class="h-8 w-64 rounded-md border border-gray-700 pr-8 pl-2"
                placeholder="Search or Jump to..."
              />
              <div
                class="absolute top-1/2 right-1 h-6 w-6 -translate-y-1/2 transform rounded-md border text-center text-gray-500"
              >
                /
              </div>
            </div>

            <div
              class="relative flex h-8 w-14 items-center rounded-md border border-gray-700"
            >
              <a href="#" class="h-8 w-8 border-r border-gray-500">
                <svg
                  class="h-8 w-8 fill-gray-500 p-1.5"
                  aria-hidden="true"
                  viewBox="0 0 16 16"
                  version="1.1"
                  data-view-component="true"
                >
                  <path
                    d="M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Zm0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-1.146 0-2.059-.327-2.71-.991A3.222 3.222 0 0 1 8 6.303a3.24 3.24 0 0 1-.544.743c-.65.664-1.563.991-2.71.991-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433ZM6.762 2.83c-.193-.206-.637-.413-1.682-.297-1.019.113-1.479.404-1.713.7-.247.312-.369.789-.369 1.554 0 .793.129 1.171.308 1.371.162.181.519.379 1.442.379.853 0 1.339-.235 1.638-.54.315-.322.527-.827.617-1.553.117-.935-.037-1.395-.241-1.614Zm4.155-.297c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Z"
                  ></path>
                  <path
                    d="M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75Zm4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0Z"
                  ></path>
                </svg>
              </a>
              <a href="#" class="h-8 w-6">
                <svg
                  class="h-8 w-6 fill-gray-500"
                  aria-hidden="true"
                  viewBox="0 0 16 16"
                  version="1.1"
                  data-view-component="true"
                >
                  <path
                    d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"
                  ></path>
                </svg>
              </a>
            </div>

            <div class="h-8 text-center text-base/8 text-gray-500">|</div>

            <div
              class="relative flex h-8 w-14 items-center rounded-md border border-gray-700"
            >
              <a href="#" class="h-8 w-8 border-gray-500">
                <svg
                  class="h-8 w-8 fill-gray-500 p-1.5"
                  aria-hidden="true"
                  viewBox="0 0 16 16"
                  version="1.1"
                  data-view-component="true"
                >
                  <path
                    d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"
                  ></path>
                </svg>
              </a>
              <a href="#" class="h-8 w-6">
                <svg
                  class="h-8 w-6 fill-gray-500"
                  aria-hidden="true"
                  viewBox="0 0 16 16"
                  version="1.1"
                  data-view-component="true"
                >
                  <path
                    d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"
                  ></path>
                </svg>
              </a>
            </div>

            <div class="h-10 w-10">
              <img
                class="h-10 w-10 rounded-full"
                src="/src/img/grid-06.jpg"
                alt=""
              />
            </div>
          </div>
        </li>
      </nav>
    </div>
    <!--end nav-top -->
    <!--  repo-list-->
    <div
      class="flex h-8 w-full items-center space-x-4 border-b border-gray-600 bg-stone-950 px-4 text-sm/4 text-gray-200"
    >
      <div
        class="mb-0.5 flex h-8 w-20 items-center justify-center space-x-2 border-b-3 border-b-amber-600 hover:bg-gray-800"
      >
        <svg
          class="h-3 w-3 fill-white"
          aria-hidden="true"
          viewBox="0 0 16 16"
          version="1.1"
          data-view-component="true"
        >
          <path
            d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"
          ></path>
        </svg>
        <span>Code</span>
      </div>

      <div
        class="mb-0.5 flex h-8 w-20 items-center justify-center space-x-2 border-b-3 border-amber-600/0 hover:bg-gray-800"
      >
        <svg
          class="h-3 w-3 fill-white"
          aria-hidden="true"
          viewBox="0 0 16 16"
          version="1.1"
          data-view-component="true"
        >
          <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
          <path
            d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
          ></path>
        </svg>
        <span>Issues</span>
        <span
          class="rounded-full bg-gray-800 p-1 text-center text-xs hover:bg-gray-500"
          >52</span
        >
      </div>

      <div
        class="mb-0.5 flex h-8 w-36 items-center justify-center space-x-2 border-b-3 border-amber-600/0 hover:bg-gray-800"
      >
        <svg
          class="h-3 w-3 fill-white"
          aria-hidden="true"
          viewBox="0 0 16 16"
          version="1.1"
          data-view-component="true"
        >
          <path
            d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
          ></path>
        </svg>

        <span>Pull requests</span>
        <span
          class="rounded-full bg-gray-800 p-1 text-center text-xs hover:bg-gray-500"
          >13</span
        >
      </div>

      <div
        class="mb-0.5 flex h-8 w-20 items-center justify-center space-x-2 border-b-3 border-amber-600/0 hover:bg-gray-800"
      >
        <svg
          class="h-3 w-3 fill-white"
          aria-hidden="true"
          viewBox="0 0 16 16"
          version="1.1"
          data-view-component="true"
        >
          <path
            d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"
          ></path>
        </svg>

        <span>Discussions</span>
      </div>

      <div
        class="mb-0.5 hidden h-8 w-20 items-center justify-center space-x-2 border-b-3 border-amber-600/0 hover:bg-gray-800 lg:flex"
      >
        <svg
          class="h-3 w-3 fill-white"
          aria-hidden="true"
          viewBox="0 0 16 16"
          version="1.1"
          data-view-component="true"
        >
          <path
            d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"
          ></path>
        </svg>

        <span>Actions</span>
      </div>

      <div
        class="mb-0.5 hidden h-8 w-20 items-center justify-center space-x-2 border-b-3 border-amber-600/0 hover:bg-gray-800 lg:flex"
      >
        <svg
          class="h-3 w-3 fill-white"
          aria-hidden="true"
          viewBox="0 0 16 16"
          version="1.1"
          data-view-component="true"
        >
          <path
            d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
          ></path>
        </svg>

        <span>Security</span>
      </div>

      <div
        class="mb-0.5 hidden h-8 w-20 items-center justify-center space-x-2 border-b-3 border-amber-600/0 hover:bg-gray-800 lg:flex"
      >
        <svg
          class="h-3 w-3 fill-white"
          aria-hidden="true"
          viewBox="0 0 16 16"
          version="1.1"
          data-view-component="true"
        >
          <path
            d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"
          ></path>
        </svg>

        <span>Insights</span>
      </div>
    </div>
    <!-- end repo-list -->
    <!-- repo-stats -->
    <div
      class="relative flex h-14 w-full items-center justify-between px-8 after:absolute after:inset-x-8 after:bottom-0 after:h-0.5 after:bg-gray-700"
    >
      <!-- repo-stats-info -->
      <div class="flex items-center space-x-3 text-gray-200">
        <div class="h-8 w-8 rounded-md bg-gray-700 hover:bg-gray-600">
          <img
            class="h-8 w-8"
            alt="Owner avatar"
            src="https://avatars.githubusercontent.com/u/67109815?s=48&amp;v=4"
          />
        </div>
        <a class="h-8 text-xl/8 hover:underline">tailwindcss</a>
        <p
          class="h-6 w-12 rounded-2xl border border-gray-500 text-center text-xs/6"
        >
          Public
        </p>
      </div>
      <!-- end repo-stats-info -->

      <!-- repo-stats-stars -->
      <div class="hidden items-center space-x-3 text-gray-200 lg:flex">
        <div
          class="flex items-center space-x-2 rounded-lg border border-gray-500 bg-gray-700 px-1 text-xs/6 text-gray-300 hover:bg-gray-600"
        >
          <svg
            class="h-4 w-4 fill-red-400"
            aria-hidden="true"
            viewBox="0 0 16 16"
            version="1.1"
            data-view-component="true"
          >
            <path
              d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"
            ></path>
          </svg>
          <span>Sponsor</span>
        </div>

        <div
          class="flex items-center space-x-2 rounded-lg border border-gray-500 bg-gray-700 px-1 text-xs/6 text-gray-300 hover:bg-gray-600"
        >
          <svg
            class="h-4 w-4 fill-gray-400"
            aria-hidden="true"
            viewBox="0 0 16 16"
            version="1.1"
            data-view-component="true"
          >
            <path
              d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"
            ></path>
          </svg>
          <span>Sponsor</span>
          <span
            class="h-4 w-6 rounded-xl bg-gray-600 px-1 text-center text-xs/4"
            >620</span
          >
          <svg
            class="h-4 w-4 fill-gray-500 hover:fill-gray-700"
            aria-hidden="true"
            viewBox="0 0 16 16"
            version="1.1"
            data-view-component="true"
          >
            <path
              d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"
            ></path>
          </svg>
        </div>

        <div
          class="flex items-center space-x-2 rounded-lg border border-gray-500 bg-gray-700 px-1 text-xs/6 text-gray-300 hover:bg-gray-600"
        >
          <svg
            class="h-4 w-4 fill-gray-400"
            aria-hidden="true"
            viewBox="0 0 16 16"
            version="1.1"
            data-view-component="true"
          >
            <path
              d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"
            ></path>
          </svg>
          <span>Fork</span>
          <span
            class="h-4 w-10 rounded-xl bg-gray-600 px-1 text-center text-xs/4"
            >4.8K</span
          >
          <div class="border-l-x h-6 w-0.5 border-l border-gray-500"></div>
          <svg
            class="h-4 w-4 fill-gray-500 hover:fill-gray-700"
            aria-hidden="true"
            viewBox="0 0 16 16"
            version="1.1"
            data-view-component="true"
          >
            <path
              d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"
            ></path>
          </svg>
        </div>

        <div
          class="flex items-center space-x-2 rounded-lg border border-gray-500 bg-gray-700 px-1 text-xs/6 text-gray-300 hover:bg-gray-600"
        >
          <svg
            class="h-4 w-4 fill-yellow-500"
            aria-hidden="true"
            viewBox="0 0 16 16"
            version="1.1"
            data-view-component="true"
          >
            <path
              d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"
            ></path>
          </svg>
          <span>Starred</span>
          <span
            class="h-4 w-10 rounded-xl bg-gray-600 px-1 text-center text-xs/4"
            >90.6K</span
          >
          <div class="border-l-x h-6 w-0.5 border-l border-gray-500"></div>
          <svg
            class="h-4 w-4 fill-gray-500 hover:fill-gray-700"
            aria-hidden="true"
            viewBox="0 0 16 16"
            version="1.1"
            data-view-component="true"
          >
            <path
              d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"
            ></path>
          </svg>
        </div>
      </div>
    </div>
    <!-- end repo-stats-stars -->
    <!-- main content -->
    <div class="mt-4 flex flex-wrap justify-between px-8 text-gray-200">
      <!-- main left content -->
      <div class="file-info w-full lg:w-3/4">
        <!-- main content top -->
        <div class="flex items-center justify-between">
          <!-- main left content branches -->
          <div class="flex items-center space-x-2">
            <div
              class="flex items-center space-x-2 rounded-lg bg-gray-700 px-2 py-1 text-base"
            >
              <svg
                class="h-4 w-4 fill-gray-500"
                aria-hidden="true"
                focusable="false"
                viewBox="0 0 16 16"
              >
                <path
                  d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"
                ></path>
              </svg>
              <span>main</span>
              <svg
                class="h-4 w-4 fill-gray-500 hover:fill-gray-700"
                aria-hidden="true"
                viewBox="0 0 16 16"
                version="1.1"
                data-view-component="true"
              >
                <path
                  d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"
                ></path>
              </svg>
            </div>
            <div
              class="flex items-center space-x-1 rounded-lg px-2 py-1 text-base/6 hover:bg-gray-700"
            >
              <svg
                class="h-4 w-4 fill-gray-500"
                aria-hidden="true"
                viewBox="0 0 16 16"
              >
                <path
                  d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"
                ></path>
              </svg>
              <span>126</span>
              <span class="text-gray-500">Branches</span>
            </div>
            <div
              class="flex items-center space-x-1 rounded-lg px-2 py-1 text-base/6 hover:bg-gray-700"
            >
              <svg
                class="h-4 w-4 fill-gray-500"
                aria-hidden="true"
                focusable="false"
                viewBox="0 0 16 16"
              >
                <path
                  d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
                ></path>
              </svg>
              <span>313</span>
              <span class="text-gray-500">Tags</span>
            </div>
          </div>
          <!-- end main left content branches -->

          <!-- main left content files info -->
          <div class="flex items-center space-x-2">
            <div class="relative">
              <input
                type="text"
                class="h-7 w-64 rounded-md border border-gray-700 pr-8 pl-2"
                placeholder="Go to file..."
              />
              <div
                class="absolute top-1/2 right-1 h-5 w-5 -translate-y-1/2 transform rounded-md border text-center text-xs/5 text-gray-400"
              >
                t
              </div>
            </div>
            <div
              class="flex items-center space-x-2 rounded-lg border border-gray-500 bg-gray-700 px-1 text-xs/6 font-semibold text-gray-300 hover:bg-gray-600"
            >
              <span>Add file</span>
              <svg
                class="h-4 w-4 fill-gray-500 hover:fill-gray-700"
                aria-hidden="true"
                viewBox="0 0 16 16"
                version="1.1"
                data-view-component="true"
              >
                <path
                  d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"
                ></path>
              </svg>
            </div>
            <div
              class="flex items-center space-x-2 rounded-lg border border-gray-500 bg-green-600 px-1 text-xs/6 font-semibold text-white hover:bg-gray-600"
            >
              <span>Code</span>
              <svg
                class="h-4 w-4 fill-white hover:fill-gray-700"
                aria-hidden="true"
                viewBox="0 0 16 16"
                version="1.1"
                data-view-component="true"
              >
                <path
                  d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"
                ></path>
              </svg>
            </div>
          </div>
          <!-- end main left content files info -->
        </div>
        <!-- end main content top -->

        <!-- matin content table -->
        <div class="mt-4 flex flex-col items-center">
          <!-- top -->
          <div
            class="flex h-14 w-full items-center justify-between rounded-t-md border border-b-0 border-gray-500 px-4"
          >
            <div class="flex items-center space-x-2 text-xs/8">
              <img
                class="h-6 w-6 rounded-full"
                src="https://avatars.githubusercontent.com/u/1834413?v=4&size=40"
                alt=""
              />
              <a href="#" class="font-semibold text-white hover:underline"
                >RobinMayfair</a
              >
              <a href="#" class="text-gray-500 hover:underline"
                >Generalize the walk implementation(<span
                  class="text-blue-500 hover:underline"
                  >#19126</span
                >)</a
              >
              <svg
                class="h-4 w-4 fill-green-500"
                aria-hidden="true"
                focusable="false"
                viewBox="0 0 16 16"
                fill="currentColor"
                overflow="visible"
              >
                <path
                  d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
                ></path>
              </svg>
            </div>

            <div class="flex items-center space-x-2 text-xs/8">
              <a
                href="#"
                class="relative pr-2 text-gray-500 after:absolute after:top-1/2 after:right-0 after:-translate-y-1/2 after:text-gray-500 after:content-['·'] hover:text-blue-500 hover:underline"
                >acb27ef</a
              >
              <p class="text-gray-500">11 hours ago</p>
              <div class="flex items-center space-x-2">
                <svg
                  class="h-4 w-4 fill-gray-500"
                  aria-hidden="true"
                  focusable="false"
                  viewBox="0 0 16 16"
                  fill="currentColor"
                >
                  <path
                    d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"
                  ></path>
                </svg>
                <p>6,468 Commits</p>
              </div>
            </div>
          </div>

          <!-- bottom -->
          <div
            class="flex w-full flex-col items-center justify-between rounded-b-md border border-gray-500 text-sm/8"
          >
            <div class="flex h-10 w-full items-center justify-between px-4">
              <div class="flex w-2/6 items-center space-x-2 text-gray-200">
                <svg
                  class="h-4 w-4 fill-gray-500"
                  aria-hidden="true"
                  focusable="false"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"
                  ></path>
                </svg>
                <span>.github</span>
              </div>
              <div class="w-3/6">
                <a
                  href="#"
                  class="text-gray-500 hover:text-blue-500 hover:underline"
                  >run prettier</a
                >
              </div>
              <div class="w-1/6 text-right">
                <span class="text-gray-500">last week</span>
              </div>
            </div>

            <div
              class="flex h-10 w-full items-center justify-between border-t border-gray-500 px-4"
            >
              <div class="flex w-2/6 items-center space-x-2 text-gray-200">
                <svg
                  class="h-4 w-4 fill-gray-500"
                  aria-hidden="true"
                  focusable="false"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"
                  ></path>
                </svg>
                <span>crates</span>
              </div>
              <div class="w-3/6">
                <a
                  href="#"
                  class="text-gray-500 hover:text-blue-500 hover:underline"
                  >Update @napa-rs/cli 3.2.0 → 3.3.0 (minor) (#19102)</a
                >
              </div>
              <div class="w-1/6 text-right">
                <span class="text-gray-500">last week</span>
              </div>
            </div>

            <div
              class="flex h-10 w-full items-center justify-between border-t border-gray-500 px-4"
            >
              <div class="flex w-2/6 items-center space-x-2 text-gray-200">
                <svg
                  class="h-4 w-4 fill-gray-500"
                  aria-hidden="true"
                  focusable="false"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"
                  ></path>
                </svg>
                <span>integrations</span>
              </div>
              <div class="w-3/6">
                <a
                  href="#"
                  class="block w-full truncate text-gray-500 hover:text-blue-500 hover:underline"
                >
                  Fix Safari devtools issues because of nested @supports
                  at-rules xxxxxxxxxxxxxxxx
                </a>
              </div>
              <div class="w-1/6 text-right">
                <span class="text-gray-500">11 hours ago</span>
              </div>
            </div>

            <div
              class="flex h-10 w-full items-center justify-between border-t border-gray-500 px-4"
            >
              <div class="flex w-2/6 items-center space-x-2 text-gray-200">
                <svg
                  class="h-4 w-4 fill-gray-500"
                  aria-hidden="true"
                  focusable="false"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"
                  ></path>
                </svg>
                <span>scripts</span>
              </div>
              <div class="w-3/6">
                <a
                  href="#"
                  class="block w-full truncate text-gray-500 hover:text-blue-500 hover:underline"
                >
                  Make TypeScript a bit more happy (#19124)
                </a>
              </div>
              <div class="w-1/6 text-right">
                <span class="text-gray-500">yesterday</span>
              </div>
            </div>

            <div
              class="flex h-10 w-full items-center justify-between border-t border-gray-500 px-4"
            >
              <div class="flex w-2/6 items-center space-x-2 text-gray-200">
                <svg
                  class="h-4 w-4 fill-gray-500"
                  aria-hidden="true"
                  focusable="false"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"
                  ></path>
                </svg>
                <span>.gitignore</span>
              </div>
              <div class="w-3/6">
                <a
                  href="#"
                  class="block w-full truncate text-gray-500 hover:text-blue-500 hover:underline"
                >
                  Add argentic workflow issue-triage (#19057)
                </a>
              </div>
              <div class="w-1/6 text-right">
                <span class="text-gray-500">7 months ago</span>
              </div>
            </div>

            <div
              class="flex h-10 w-full items-center justify-between border-t border-gray-500 px-4"
            >
              <div class="flex w-2/6 items-center space-x-2 text-gray-200">
                <svg
                  class="h-4 w-4 fill-gray-500"
                  aria-hidden="true"
                  focusable="false"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"
                  ></path>
                </svg>
                <span>.npmrc</span>
              </div>
              <div class="w-3/6">
                <a
                  href="#"
                  class="block w-full truncate text-gray-500 hover:text-blue-500 hover:underline"
                >
                  introduce v4 codebase
                </a>
              </div>
              <div class="w-1/6 text-right">
                <span class="text-gray-500">last year</span>
              </div>
            </div>

            <div
              class="flex h-10 w-full items-center justify-between border-t border-gray-500 px-4"
            >
              <div class="flex w-2/6 items-center space-x-2 text-gray-200">
                <svg
                  class="h-4 w-4 fill-gray-500"
                  aria-hidden="true"
                  focusable="false"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"
                  ></path>
                </svg>
                <span>package.json</span>
              </div>
              <div class="w-3/6">
                <a
                  href="#"
                  class="block w-full truncate text-gray-500 hover:text-blue-500 hover:underline"
                >
                  Update @playwright/test 1.55.0 → 1.55.1 (patch) (#19033)
                </a>
              </div>
              <div class="w-1/6 text-right">
                <span class="text-gray-500">2 weeks ago</span>
              </div>
            </div>
          </div>
        </div>
        <!-- end matin content table -->

        <!-- readme -->
        <div
          class="readme mt-4 flex h-auto flex-col rounded-lg border border-gray-500 p-6 text-gray-200"
        >
          <h2 class="mb-4 text-2xl font-bold">README.md</h2>

          <p class="mb-4 text-gray-300">
            TailwindCSS 是一个实用优先的 CSS
            框架，用于快速构建现代用户界面。它提供了丰富的工具类，帮助开发者快速实现响应式设计。
          </p>

          <div class="mb-4 rounded-lg bg-gray-900 p-0 text-gray-100">
            <pre class="m-0 overflow-x-auto px-4 text-left">
              <code class="block text-left whitespace-pre-line">
                &lt;div class="flex items-center justify-center h-screen"&gt;
                  &lt;h1 class="text-4xl font-bold text-blue-500"&gt;Hello, TailwindCSS!&lt;/h1&gt;
                &lt;/div&gt;
              </code>
            </pre>
          </div>

          <div class="flex items-center space-x-4">
            <a
              href="https://tailwindcss.com"
              target="_blank"
              class="text-blue-400 hover:underline"
            >
              官方文档
            </a>
            <a
              href="https://github.com/tailwindlabs/tailwindcss"
              target="_blank"
              class="text-blue-400 hover:underline"
            >
              GitHub 仓库
            </a>
          </div>
        </div>
        <!-- end readme -->
      </div>
      <!-- end main left content -->
      <!-- main right content -->
      <div
        class="about-info mt-4 flex w-full flex-col justify-start space-y-4 pl-4 lg:mt-0 lg:w-1/4"
      >
        <div class="about-title flex w-full flex-col space-y-4">
          <h3 class="font-semibold">About</h3>
          <span class="text-sm/6"
            >A utility-first CSS framework for rapid UI development.</span
          >
        </div>

        <div class="about-link flex w-full items-center space-x-2">
          <svg
            class="h-4 w-4 fill-gray-200"
            aria-hidden="true"
            viewBox="0 0 16 16"
            version="1.1"
          >
            <path
              d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"
            ></path>
          </svg>
          <a href="#" class="text-sm/8 text-blue-500 hover:underline"
            >tailwindcss.com/</a
          >
        </div>

        <div class="about-tags flex w-3/4 flex-wrap items-center gap-2">
          <span
            class="rounded-xl bg-gray-700 px-3 py-1 text-[10px]/4 font-semibold text-blue-500 hover:bg-blue-500 hover:text-white"
            >css</span
          >
          <span
            class="rounded-xl bg-gray-700 px-3 py-1 text-[10px]/4 font-semibold text-blue-500 hover:bg-blue-500 hover:text-white"
            >postcss</span
          >
          <span
            class="rounded-xl bg-gray-700 px-3 py-1 text-[10px]/4 font-semibold text-blue-500 hover:bg-blue-500 hover:text-white"
            >responsive</span
          >
          <span
            class="rounded-xl bg-gray-700 px-3 py-1 text-[10px]/4 font-semibold text-blue-500 hover:bg-blue-500 hover:text-white"
            >css-framework</span
          >
          <span
            class="rounded-xl bg-gray-700 px-3 py-1 text-[10px]/4 font-semibold text-blue-500 hover:bg-blue-500 hover:text-white"
            >functional-css</span
          >
          <span
            class="rounded-xl bg-gray-700 px-3 py-1 text-[10px]/4 font-semibold text-blue-500 hover:bg-blue-500 hover:text-white"
            >utility-classes</span
          >
          <span
            class="rounded-xl bg-gray-700 px-3 py-1 text-[10px]/4 font-semibold text-blue-500 hover:bg-blue-500 hover:text-white"
            >tailwindcss</span
          >
        </div>

        <div class="about-info flex flex-col place-content-start">
          <div
            class="group flex items-center space-x-2 text-sm/8 text-gray-400"
          >
            <svg
              class="h-4 w-4 fill-gray-400 group-hover:fill-blue-500"
              aria-hidden="true"
              height="16"
              viewBox="0 0 16 16"
              version="1.1"
              data-view-component="true"
            >
              <path
                d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
              ></path>
            </svg>
            <span class="group-hover:text-blue-500">Readme</span>
          </div>
          <div
            class="group flex items-center space-x-2 text-sm/8 text-gray-400"
          >
            <svg
              class="h-4 w-4 fill-gray-400 group-hover:fill-blue-500"
              aria-hidden="true"
              height="16"
              viewBox="0 0 16 16"
              version="1.1"
              data-view-component="true"
            >
              <path
                d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"
              ></path>
            </svg>
            <span class="group-hover:text-blue-500">MIT license</span>
          </div>
          <div
            class="group flex items-center space-x-2 text-sm/8 text-gray-400"
          >
            <svg
              class="h-4 w-4 fill-gray-400 group-hover:fill-blue-500"
              aria-hidden="true"
              height="16"
              viewBox="0 0 16 16"
              version="1.1"
              data-view-component="true"
            >
              <path
                d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"
              ></path>
            </svg>
            <span class="group-hover:text-blue-500">Contributing</span>
          </div>
          <div
            class="group flex items-center space-x-2 text-sm/8 text-gray-400"
          >
            <svg
              class="h-4 w-4 fill-gray-400 group-hover:fill-blue-500"
              aria-hidden="true"
              height="16"
              viewBox="0 0 16 16"
              version="1.1"
              data-view-component="true"
            >
              <path
                d="M6 2c.306 0 .582.187.696.471L10 10.731l1.304-3.26A.751.751 0 0 1 12 7h3.25a.75.75 0 0 1 0 1.5h-2.742l-1.812 4.528a.751.751 0 0 1-1.392 0L6 4.77 4.696 8.03A.75.75 0 0 1 4 8.5H.75a.75.75 0 0 1 0-1.5h2.742l1.812-4.529A.751.751 0 0 1 6 2Z"
              ></path>
            </svg>
            <span class="group-hover:text-blue-500">Activity</span>
          </div>
          <div
            class="group flex items-center space-x-2 text-sm/8 text-gray-400"
          >
            <svg
              class="h-4 w-4 fill-gray-400 group-hover:fill-blue-500"
              aria-hidden="true"
              height="16"
              viewBox="0 0 16 16"
              version="1.1"
              data-view-component="true"
            >
              <path
                d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25Zm1.75-.25a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25ZM3.5 6.25a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75Zm.75 2.25h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1 0-1.5Z"
              ></path>
            </svg>
            <span class="group-hover:text-blue-500">Custom properties</span>
          </div>
        </div>

        <div
          class="releases flex flex-col place-content-start gap-4 border-t border-t-gray-500 pt-4"
        >
          <div class="flex items-center justify-start gap-2">
            <h3 class="font-semibold">Releases</h3>
            <span
              class="h-6 w-8 rounded-md bg-neutral-800 text-center text-xs/6 font-semibold"
              >293</span
            >
          </div>
          <div class="flex flex-wrap items-start gap-2">
            <svg
              class="h-4 w-4 fill-green-500"
              aria-hidden="true"
              viewBox="0 0 16 16"
              version="1.1"
            >
              <path
                d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
              ></path>
            </svg>
            <div class="flex w-32 flex-wrap gap-x-2 gap-y-0.5 px-1">
              <span class="h-full text-sm/4 font-semibold text-white"
                >v4.1.14</span
              >
              <span
                class="rounded-xl border border-green-500 px-1 text-sm/4 text-green-500"
                >Latest</span
              >
              <span class="text-xs text-stone-500">2 weeks ago</span>
            </div>
          </div>
          <div class="text-sm text-blue-500 hover:underline">
            + 292 releases
          </div>
        </div>

        <div
          class="used-by flex flex-col place-content-start gap-2 border-t border-t-gray-500 py-4"
        >
          <div class="flex items-center justify-start gap-2">
            <h3 class="font-semibold">Used by</h3>
            <span
              class="h-6 w-12 rounded-md bg-neutral-800 text-center text-xs/6 font-semibold"
              >15.2m</span
            >
          </div>

          <div class="flex items-center -space-x-2">
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/171674631?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/110289332?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/125185797?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/158207465?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/7996369?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/25898715?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/121059759?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/149217216?s=64&v=4"
              alt=""
            />

            <a href="#" class="ml-4 text-xs text-blue-500 hover:underline"
              >+ 15,221,455</a
            >
          </div>
        </div>

        <div
          class="Contributors flex flex-col place-content-start gap-2 border-t border-t-gray-500 py-4"
        >
          <div class="flex items-center justify-start gap-2">
            <h3 class="font-semibold">Contributor</h3>
            <span
              class="h-6 w-8 rounded-md bg-neutral-800 text-center text-xs/6 font-semibold"
              >325</span
            >
          </div>

          <div class="flex flex-wrap items-center gap-2">
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/4323180?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/1834413?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/614993?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/in/715?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/882133?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/458591?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/in/2141?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/2615508?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/112581971?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/6643991?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/5871133?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/1059139?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/1107521?s=64&v=4"
              alt=""
            />
            <img
              class="h-8 w-8 rounded-full border-2 border-neutral-900"
              src="https://avatars.githubusercontent.com/u/32498324?s=64&v=4"
              alt=""
            />
            <span class="mt-2 text-sm text-blue-500 underline"
              >+ 311 contributors</span
            >
          </div>
        </div>

        <div
          class="languages mb-4 flex flex-col place-content-start gap-2 border-t border-t-gray-500 py-4"
        >
          <div class="flex items-center justify-start gap-2">
            <h3 class="font-semibold">Languages</h3>
          </div>

          <div class="flex items-center gap-x-0.5">
            <div class="h-2 w-4/5 rounded-l-xl bg-blue-400"></div>
            <div class="h-2 w-4/25 bg-orange-400"></div>
            <div class="h-2 w-1/25 rounded-r-xl bg-orange-50"></div>
          </div>

          <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
            <div class="flex items-center gap-x-2 px-2 text-xs">
              <div class="h-2 w-2 rounded-full bg-blue-400"></div>
              <span class="hover:text-blue-500">TypeScript</span>
              <span class="text-stone-500">81.2%</span>
            </div>

            <div class="flex items-center gap-x-2 px-2 text-xs">
              <div class="h-2 w-2 rounded-full bg-orange-400"></div>
              <span class="hover:text-blue-500">Rust</span>
              <span class="text-stone-500">16.1%</span>
            </div>

            <div class="flex items-center gap-x-2 px-2 text-xs">
              <div class="h-2 w-2 rounded-full bg-orange-50"></div>
              <span class="hover:text-blue-500">Others</span>
              <span class="text-stone-500">2.7%</span>
            </div>
          </div>
        </div>
      </div>
      <!-- end main right content -->
    </div>
    <!-- end main content -->

    <!-- footer -->
    <footer
      class="my-4 flex flex-col items-center justify-center gap-2 lg:flex-row"
    >
      <div class="flex items-center justify-center gap-2">
        <a href="https://github.com/satnaing/github-stats-cards">
          <img
            class="h-6 w-6"
            src="https://img.icons8.com/fluency/48/000000/github.png"
            alt="GitHub"
          />
        </a>
        <span class="text-xs text-stone-500">© 2025 GitHub, Inc.</span>
      </div>
      <div
        class="flex items-center justify-center gap-2 text-xs text-stone-500"
      >
        <a href="#" class="hover:text-blue-500 hover:underline">Terms</a>
        <a href="#" class="hover:text-blue-500 hover:underline">Privacy</a>
        <a href="#" class="hover:text-blue-500 hover:underline">Security</a>
        <a href="#" class="hover:text-blue-500 hover:underline">Status</a>
        <a href="#" class="hover:text-blue-500 hover:underline">Community</a>
        <a href="#" class="hover:text-blue-500 hover:underline">Docs</a>
        <a href="#" class="hover:text-blue-500 hover:underline">Contact</a>
        <a href="#" class="hover:text-blue-500 hover:underline"
          >Manage cookies</a
        >
        <a href="#" class="hover:text-blue-500 hover:underline"
          >Do not share my personal information</a
        >
      </div>
    </footer>
    <!-- end footer-->
  </body>
</html>
